<template>
  <div class="app-container">
      <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item label="请选择统计类型">
              <el-select v-model="searchObj.type" placeholder="请选择">
              <el-option label="学员登陆数统计" value="login_num"></el-option>
              <el-option label="学员注册数统计" value="register_num"></el-option>
              <el-option label="课程播放数统计" value="video_view_num"></el-option>
              <el-option label="每日课程数统计" value="course_num"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="统计时间">
              <el-date-picker
                  v-model="searchObj.begin"
                  align="right"
                  type="date"
                  placeholder="选择开始日期"
                  >
              </el-date-picker>
          </el-form-item>
          <el-form-item>
              <el-date-picker
                  v-model="searchObj.end"
                  align="right"
                  type="date"
                  placeholder="选择截至日期"
                 
                  >
              </el-date-picker>
          </el-form-item>
          
          <el-form-item>
              <el-button icon="el-icon-search" :loading="btnDisable" type="primary" @click="showChart">查询</el-button>
          </el-form-item>
          <!-- <el-form-item>
              <el-button @click="resetData">清空</el-button>
          </el-form-item> -->
      </el-form>
      <div id="main" style="width:1000px;height:600px"></div>
</div>
</template>

<script>
import * as echarts from 'echarts';
import statisticsApi from '@/api/statistics'
export default {
data(){
  return{
    searchObj:{},
    xData:[],//x轴数据
    yData:[],//Y轴数据
    btnDisable:false
  }
},
methods:{
  showChart(){
    //获取查询参数，调用统计api获取数据
    //将按钮设置为禁用
    this.btnDisable=true
    statisticsApi.getData(this.searchObj).then(res=>{
      console.log(res);
      //渲染出折线图
      this.xData=res.data.xData
      this.yData=res.data.yData
      this.btnDisable=false
      this.setChart()

    })
  },
  setChart(){
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      xAxis: {
        type: 'category',
        data: this.xData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.yData,
          type: 'line'
        }
      ]
    };

    option && myChart.setOption(option);

  }
},


}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>